<template>
	<view  :class="{ 'h': swiperTypeVal=='4' }" :style="{'top': swiperTypeVal === '4' ? setheight : 0,}">
		<view class="component-box" :class="fixedTop ? 'no-margin' : ''" :style="[outModuleCss, moduleBgCss]">
			<defaultTemplate v-if="styleType == 1" :propsData="propsData"></defaultTemplate>
		
			<searchWithBtn v-if="styleType == 2" :propsData="propsData" ></searchWithBtn>
		</view>
		<view v-if="fixedTop" class="model" :style="{ height }"></view>
	</view>
</template>

<script>
	import {
		diyMixin
	} from "../mixins/diy";
	import defaultTemplate from "./templates/default.vue";
	import searchWithBtn from "./templates/searchWithBtn.vue";

	export default {
		props: {
			propsData: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		components: {
			defaultTemplate,
			searchWithBtn,
		},
		mixins: [diyMixin], //混入文件
		data() {
			return {
				height: 0,
				swiperTypeVal:'',
				setheight:null,
			};
		},
		watch:{
			moduleBgCss:{
				handler(e){
					
				},
				deep:true,
				immediate:true
			}
		},
		created() {
			uni.$on('swiperType', (data) => {
			   this.swiperTypeVal = data.val;
			 });
			 uni.$on('height', (data) => {
			 	this.setheight=data
			 });
			uni.$emit('fixedTop',this.propsData.params.fixedTop)
			uni.$emit('bgColor',this.propsData.moduleCss.backgroundColor)
			
		},
		computed: {
			borderType() {
				return this.propsData.params.borderType;
			},
			styleType() {
				return this.propsData.params.styleType;
			},
			fixedTop() {
				return this.propsData.params.fixedTop;
			},
		},
		methods: {
			go_searchImg() {
				this.$utils.toUrl("/cropping/search_deng/search_deng");
			},
		},
		mounted() {
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.in(this)
					.select(".component-box")
					.boundingClientRect(({
						height
					}) => {
						this.height = height + "px";
						let num = 0;
						if (this.fixedTop) {
							num = height;
						}

						this.$store.commit("setIndexSearchHeight", num);
					})
					.exec();
			});
		},
	};
</script>

<style scoped lang="scss">
	.h {
		position: absolute;
		z-index: 999;
		width: 100%;
		top: calc(44px + 88rpx);
		background-color: "#ffffff00" !important
	}

	.component-box {
		.module-bg {
			width: 100%;
			height: 100%;
			z-index: -1;
			position: absolute;
			left: 0;
			top: 0;
		}

		/deep/default-template {
			flex-grow: 1;
		}

		.saoma {
			// background: #fb66a4;
			padding-right: 18rpx;
			height: 84rpx;
			display: flex;
			align-items: center;
			border: none;

			i {
				font-size: 60rpx;
				color: #f1f1f1;
			}
		}

		.search-box {
			width: 100%;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			position: relative;

			.input-section {
				width: 92%;
				height: 64rpx;
				align-items: center;
				border-radius: 60rpx;
				overflow: hidden;
				background-color: #f2f2f2;
				display: flex;
				padding-right: 20rpx;
				border: 1rpx solid #707070;
				position: relative;
				margin: 0 auto;

				.input-inner {
					position: relative;
					display: inline-block;
				}

				.iconfont {
					position: absolute;
					left: 22rpx;
					z-index: 11;
					font-size: 40rpx;
				}

				text {
					margin-left: 68rpx;
					color: #9b9b9b;
				}
			}

			.right-angle {
				border-radius: 8rpx;
			}

			.content-center {
				justify-content: center;
			}

			.input-sticky {
				width: 100%;

				.sticky-box {
					width: 100%;
					height: 84rpx;
					position: relative;
					display: flex;
					align-items: center;
				}

				.input-section {
					height: 64rpx;
					padding: 10rpx;
				}

				/deep/ .u-sticky-wrap {
					height: 84rpx;
					background-color: inherit;
				}

				/deep/ .u-sticky {
					height: 84rpx;
				}
			}
		}

		.fixed-top {
			position: fixed;
			left: 0;
			top: 128rpx;
			z-index: 511;
		}
	}

	.no-margin {
		position: fixed !important;
		margin: 0 !important;
		z-index: 999;
		width: 100%;
	}

	.model {
		visibility: hidden;
	}
</style>